<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
    :router="true"
    :ellipsis="false">
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/about">关于</el-menu-item>
        <div class="flex-grow" />
        <el-sub-menu index="#">
            <template #title>个人中心</template>
        <el-menu-item index="#"  @click="logout">登出</el-menu-item>

      </el-sub-menu>
    
    </el-menu>
    <RouterView></RouterView>


</template>

<script setup>

import { getUserInfo, getDownloadPolicy } from '@/api/user';
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
import { useTokenInfoStore } from '@/store/tokenInfo';

const router = useRouter();

const logout = () => {
    let tokenInfo = useTokenInfoStore()
    tokenInfo.clearToken()
    router.go(0)
}

const getInfo = async () => {
    let result = await getUserInfo();
    if (!result) {
        message.error('获取用户信息失败，请重新登录');
        setTimeout(() => {
            router.push("/login");
        }, 2000);

    } else {
        // console.log(result)
    }
}
onMounted(() => {
    getInfo();
})

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
    // console.log(key, keyPath)
}
</script>
<style>
.flex-grow {
  flex-grow: 1;
}
</style>